<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>微博发布效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .weibo {
            width: 600px;
            border: 1px solid #ccc;

            margin: 100px auto;
            padding: 10px;

        }

        .weibo-text {
            width: 590px;
            height: 140px;
            padding: 5px;
            border: 1px solid #ccc;
            outline: none;
            resize: none;
        }

        .weibo-text:focus {
            border-color: #f60;
        }

        .weibo-btn {
            width: 80px;
            height: 30px;
            background-color: #f90;
            color: #fff;
            border: 0 none;
            margin-top: 5px;
            border-radius: 3px;
            cursor: pointer;
            outline: 0 none;
        }

        .weibo-list {
            padding-top: 10px;
        }

        .weibo-list li {
            font-size: 14px;
            line-height: 30px;
            border-bottom: 1px dotted #ccc;
            overflow: hidden;
        }

        .weibo-list li p {
            float: left;
        }

        .weibo-list li span {
            float: right;
            cursor: pointer;
        }

        .weibo-list li input {
            height: 24px;
            line-height: 24px;
            width: 300px;
            font-size: 14px;
            border: 0 none;
        }
    </style>    
</head>

<body>
<div class="weibo">
    <textarea class="weibo-text"></textarea>
    <input class="weibo-btn" value="发布" type="button">
    <ul class="weibo-list">
        <li>
            <p>快来收了这九款用上就停不下来的应用吧！！</p>
            <span>删除</span>
        </li>
        <li>
            <p>超级详细的云南大理自助游攻略</p>
            <span>删除</span>
        </li>
        <li>
            <p>外国最近很火的舞蹈，舒服简单自然，太棒了！</p>
            <span>删除</span>
        </li>
    </ul>
</div>
</body>
</html>
<script>
/*
  微博的效果：
    1 点击发布，会创建一个新的li
    2 点击删除，可以把某一条微博移除
*/
/*
  步骤：
    1 获取元素
    2 注册事件 - 点击
    3 点击事件里面，
      3.1 获取文本域的内容
      3.2 创建个新的li，把文本域的内容作为li的内容
      3.3 把新建的li放到ul的最前面
      3.4 把文本域里面清空

    4 点击删除
        把点击的元素所对应的li移除 - removeChild
        4.1 给所有的删除按钮，注册点击事件
        4.2 找到删除按钮对应的li调用removeChild方法移除li

    5 希望可以使用快捷键的方式实现发布
        ctrol + 回车  发布
        判断有没有按下ctrol+回车
        5.1 给文本域注册键盘按下事件
        5.2 判断按下的是否是回车+ctrol
            如果满足条件，就发布
*/
// 获取按钮和文本域和ul
// var btn = document.getElementsByClassName('weibo-btn');
var btn = document.querySelector('.weibo-btn');
var txt = document.querySelector('.weibo-text');
var list = document.querySelector('.weibo-list');
// 注册事件
btn.onclick = function(){
  // 获取文本域的内容
  var text = txt.value;
  // 创建一个新的li
  var li = document.createElement('li');
  // 把文本域的内容作为li的新的内容
  li.innerHTML = '<p>'+ text +'</p><span>删除</span>';
  // 把创建好的li，添加到结构中
//   list.appendChild(li);
// 想要的效果是把新建的元素，放到最前面
    list.insertBefore(li,list.children[0]);
  // 把文本域里面的内容清空
  txt.value= '';
}

// 因为删除按钮其实有一部分是动态生成的，最好的方式是使用事件委托的方式实现
// 1 把事件注册在一个已经存在的前代元素身上 - 把事件注册在ul身上
list.addEventListener('click',function(e){
    // 2 当事件被触发的时候，判断一下，事件目标是否是一个指定的元素，如果是，才执行
    // 我们的要求是委托span的点击事件 ，判断点击的是否是span
    // console.log(e.target.nodeName);
    if(e.target.nodeName === 'SPAN'){
        // 如果满足条件，就把span对应的li删除
        var li = e.target.parentNode;
        list.removeChild(li);
    }
});

// 事件按键发布
// 给文本域注册了键盘事件
txt.onkeydown = function(e){
    // 判断是否同时按下了ctrl以及回车
    // console.log(e);
    // 如果按下了ctrl，事件对象的一个属性    事件对象.ctrlKey  就是true
    if(e.ctrlKey && e.keyCode === 13){
        // 此时就要发布微博
        btn.onclick();// 直接使用代码触发点击事件
    }
}

</script>